<template>
  <Dialog ref="dialog" :headerInfo="headerInfo">
    <!-- <template slot="header">
      <p>ssaaa</p>
      <p>ssaaa</p>
    </template> -->
    <template slot="main">
      <p>sku</p>
      
    </template>
    <!-- <template v-slot:main>
      <p>sss</p>
      <p>sss</p>
      <p>sss</p>
      <p>sss</p>
      <p>sss</p>
    </template> -->
    <template slot="footer">
      <div class="dialog_footer">
        <button @click="submit">
          确定购买
        </button>
      </div>
    </template>
  </Dialog>
</template>
<script>
export default {
  data () {
    return {
      headerInfo: {
        title: '这是sku弹窗'
      }
    }
  },
  methods: {
    openDialog () {
      this.$refs.dialog.openDialog()
    },
    closeDialog () {
      this.$refs.dialog.closeDialog()
    },
    submit () {
      let data = 4444
      this.$emit('handleSubmit')
      // this.closeDialog()
    }
  }
}
</script>

<style scoped>
.dialog{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.dialog_bg{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.5);
  transition: opacity .3s;
  opacity: 0;
}
.dialog_open{
  z-index: 1000;
}
.dialog_open .dialog_bg{
  opacity: 1;
}
.dialog_content{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 1001;
  background: #f6f6f6;
  overflow: auto;
  transition: transform .4s,opacity .4s;
  transform: translateY(100%);
  opacity: 0;
}
.dialog_open .dialog_content{
  transform: translateY(0);
  opacity: 1;
}
.dialog_header{
  display: grid;
  height: 44px;
  background: #f2f2f2;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas: 'close title desc';
}
.dialog_header .close{
  grid-area: close;
  place-self: center flex-start;
}
.icon_close{
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}
.icon_close:before {
  content: '';
  width: 17px;
  height: 1px;
  background: #333;
  display: block;
  position: relative;
}
.icon_close:after {
  content: '';
  width: 1px;
  height: 17px;
  background: #333;
  display: block;
  position: relative;
  left: -9px;
}
.dialog_header .title{
  grid-area: title;
  align-self: center;
  text-align: center;
}
.dialog_header .desc{
  grid-area: desc;
}
.dialog_main{
  height: 300px;
}
</style>